.register{
  height: 570px;
}
.register .left .title{
  margin-left: 0px;
  text-align: center;

}
.context>div{
  overflow: hidden;
}

.message{
  width: 283px;
  float: right;
  text-align: left !important;
}
.register .left .context input{
  line-height: 30px;
  height: auto;
}
.inviteCode{
  padding-left: 10px;
  border: none;
}
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.px2rem(@name, @px){
    @{name}: @px / 75.2 * 1rem;
}
.px2px(@name, @px){
    @{name}: round(@px / 2) * 1px;
  [data-dpr="2"] & {
      @{name}: @px * 1px;
  }
  // for mx3
  [data-dpr="2.5"] & {
      @{name}: round(@px * 2.5 / 2) * 1px;
  }
  // for 小米note
  [data-dpr="2.75"] & {
      @{name}: round(@px * 2.75 / 2) * 1px;
  }
  [data-dpr="3"] & {
      @{name}: round(@px / 2 * 3) * 1px
  }
  // for 三星note4
  [data-dpr="4"] & {
      @{name}: @px * 2px;
  }
}
.content{
  .message{
    width: auto;
  }
  .inviteCode{
    padding: 0;
  }
  .logo{
    .px2rem(height,238);
    text-align: center;
    .px2rem(line-height,238);
    img{
      vertical-align: middle;
      .px2rem(width,200);
    }
  }
  .px2px(font-size,32);
  margin: 0 auto;
  .title{
    position: relative;
    &:after{
      position: absolute;
      width: 100%;
      .px2px(height,1);
      bottom: 0;
      content: "";
      left: 0;
      background: #ddd;
    }
    .px2rem(height,88);
    .px2rem(line-height,88);
    text-align: center;
  }
  .error{
    border-color: #E60111 !important;
  }
  .context{
    .message{
      color: #E60111;
      .px2px(font-size,26);
      .px2rem(padding-left,20);
      border: none;
      display: none;

      float: none;


    }

    >div{
      .item{
        width: 100%;
        .px2px(font-size,36);
        color: #b6b6b6;
        display: inline-block;
        .px2rem(line-height,88);
        .px2rem(height,88);
        .px2rem(padding-left,15);
        .px2rem(padding-right,15);
        input{
          color: #7f7f7f;
          outline:none;
          border: none;
          .px2px(font-size,36);
          width: 80%;
          .px2rem(line-height,50);

        }
      }
      .px2rem(margin-top,10);
      .px2rem(margin-bottom,10);
      .px2rem(margin-left,30);
      .px2rem(margin-right,30);
      border: 1px solid #ddd;
      .px2rem(  border-width,1);
      .px2rem( border-radius,8);
    }
    .invitereason-item{
      .px2rem(height,220);
      .item{
        padding: 0;
        width: 100%;
      }
      #invitereason{
        color: #7f7f7f;
        width: 100%;
        height: 100%;
        .px2rem(padding,15);
        .px2px(font-size,36);
        .px2rem(border-radius,8);
        vertical-align:middle;
        outline: none;
      }
    }
    .commit-button{
      .px2rem(margin-top,60);
      .px2rem(height,80);
      .px2px(font-size,32);
      background: #E60111;
      .px2rem(line-height,80);
      text-align: center;
      color: #FFF;
    }
  }
}
.msgDialogWrap{
  position: fixed;
  width: 100%;
  height: 150px;
  top:35%;
  text-align: center;

  .msgDialogMask{
    width: 150px;
    height: 150px;
    margin: 0 auto;
    background: #000;
    opacity: 0.6;
    border-radius: 8px;
  }
  .msgDialogIcon{
    position: absolute;
    width: 100%;
    top: 28px;
    font-size: 54px;
    color: #fff;
  }
  .icon-adopt{
    color: #00ca5a;
  }
  .icon-no{
    color: #FF4E5B;
  }
  .msgDialogTitle{
    position: absolute;
    width: 100%;
    bottom: 17px;
    font-size: 14px;
    line-height: 19px;
    color: #fff;
  }
}
.toastWrap {
  position: absolute;
  z-index: 10;
  top: 50%;
  width: 100%;
}
.toastWrap .toastTitle {
  //.px2rem(width,200);
  .px2rem(padding,10);
  max-width: 80%;
  word-wrap: break-word;
  margin: 0 auto;
  text-align: center;
  background: #000;
  line-height: 47px;
  border-radius: 8px;
  opacity: 0.7;
  .px2px(font-size,32px);
  color: #fff;
}
.toastBreakWrap{
  position: absolute;
  z-index: 10;
  top: 50%;
  width: 100%;
  .toastBreak{
    width: 200px;
    height: 90px;
    margin: 0 auto;
    text-align: center;
    background: #000;
    border-radius: 8px;
    opacity: 0.7;
    font-size: 16px;
    color: #fff;
  }
  .toastTop{
    padding-top: 20px;
  }
}
